import {
  Button,
  Col,
  Row,
  Statistic,
  Spin,
} from 'antd';
import React from 'react';
import { useRequest, useUnmount } from 'ahooks'
import { getUserStaticApi, getProStaticApi } from '@/api/data';
import Authority from '../../../../components/Authority';

const AppMainStatic = () => {
  const {
    data: uerCount,
    loading: userloading,
    run: userCountRefresh,
    cancel: userCountCancel,
  } = useRequest(getUserStaticApi, { pollingInterval: 6000 })
  useUnmount(() => {
    userCountCancel();
  })
  return (
    <Row gutter={16}>
      <Col span={8}>
        <Spin spinning={userloading} delay={200}>
          <Statistic title="用户总量" value={userloading ? '...' : uerCount} />
          <Button
            style={{
              marginTop: 16,
            }}
            type="primary"
            onClick={userCountRefresh}
            loading={userloading}
          >
            Refresh
          </Button>
        </Spin>

      </Col>

      <Col span={8}>
        <Statistic title="商品总量" value={112893} />
        <Authority>
          <Button
            style={{
              marginTop: 16,
            }}
            type="primary"
          >
            Refresh
          </Button>
        </Authority>

      </Col>
    </Row>
  )
}
export default AppMainStatic
